<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: sunchangshun
 * @Date: 2021-02-18 07:58:07
 * @LastEditors: gaojiapeng
 * @LastEditTime: 2021-04-13 16:50:24
-->
<template>
  <div class="chart" ref="chart">
    <div id="chartQHDDY" style="height: 100%; width: 100%"></div>
  </div>
</template>
<script>
import DataSet from "@antv/data-set";
import * as echarts from "echarts";
import { GetDlpSCCount } from "@/api";
import {
  cyLabelMap,
  pqLabelMap,
  setChartData,
} from "@/views/Home/Layout/newLabel";
export default {
  data() {
    return {
      charmaxval: 10,
      MyChart: null,
    };
  },
  mounted() {
    this.getChart();
  },
  methods: {
    getChart() {
      const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)); //获取当天零点的时间
      const stamp2 = new Date(
        new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
      ); //获取当天23:59:59的时间
      const startDate = this.formatterDate(stamp1, "yyyy-MM-ddThh:mm:ss");
      const endDate = this.formatterDate(stamp2, "yyyy-MM-ddThh:mm:ss");
      const PostData = {
        deviceTreeReqVO: {
          deviceIds: [
            "1598147780059713537",
            "1598188425893761026",
            "1598191687585878018",
            "1598191902636232705",
            "1629014103828447233",
            "1598148005595828226",
            "1598190659805237249",
            "1598188779129655297",
            "1639328908485185537",
            "1632926015586938881",
            "1598148224886624257",
            "1647804580551958529",
          ],
          level: 2,
          schemeId: "49814752176869376",
        },
        dispatchingLineId: 0,
        endTime: startDate,
        queryType: "1",
        startTime: startDate,
        type: 2,
      };
      GetDlpSCCount(PostData).then((res) => {
        // let dataX = [
        // ]; //名称
        // let dataY = [
        // ]; //数据
        // for (let i=0;i<res.data.data.length;i++){
        //   dataX.push(res.data.data[i].productName.split('(')[0])
        //   if(res.data.data[i].list.length){
        //     dataY.push(res.data.data[i].list[0].count)
        //   }else{
        //     dataY.push(0)
        //   }
        // }
        const ret = res.data.data;
        const { dataX, dataY } = setChartData(
          ret,
          cyLabelMap,
          "productName",
          "count"
        );
        var chartDom = document.getElementById("chartQHDDY");
        var myChart = echarts.init(chartDom);

        let zoomShow = false;
        if (dataY.length > 14) {
          zoomShow = true;
        } else {
          zoomShow = false;
        }
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "10%",
            right: "5%",
            left: "10%",
            bottom: "25%",
          },
          xAxis: [
            {
              type: "category",
              data: dataX,
              axisLine: {
                lineStyle: {
                  color: "rgba(66, 192, 255, .3)",
                },
              },
              axisLabel: {
                interval: 0,
                margin: 10,
                color: "#05D5FF",
                textStyle: {
                  fontSize: 11,
                },
                rotate: "45",
              },
              axisTick: {
                //刻度
                show: false,
              },
            },
          ],
          yAxis: [
            {
              name: "加工件数/个",
              nameTextStyle: {
                color: "#65ABE7",
                fontSize: 12,
              },
              axisLabel: {
                padding: [3, 0, 0, 0],
                formatter: "{value}",
                color: "rgba(95, 187, 235, 1)",
                textStyle: {
                  fontSize: 11,
                  color: "#fff",
                },
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(66, 192, 255, .3)",
                },
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0)",
                },
              },
            },
          ],
          dataZoom: [
            //滚动条
            {
              show: zoomShow,
              type: "slider",
              realtime: true,
              startValue: 0,
              endValue: 14,
              xAxisIndex: [0],
              bottom: "10",
              left: "30",
              height: 10,
              borderColor: "rgba(0,0,0,0)",
              textStyle: {
                color: "#05D5FF",
              },
            },
          ],
          series: [
            {
              type: "bar",
              data: dataY,
              barWidth: "10",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 0.98,
                        color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(5, 213, 255, 1)",
                  shadowBlur: 4,
                },
              },
              label: {
                normal: {
                  show: true,
                  lineHeight: 10,
                  formatter: "{c}",
                  position: "top",
                  textStyle: {
                    color: "#fff",
                    fontSize: 10,
                  },
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      });
    },
    //时间格式化
    formatterDate(date, fmt) {
      let nowDate = {
        yyyy: date.getFullYear(), // 年
        MM: date.getMonth() + 1, // 月份
        dd: date.getDate(), //日
        hh: date.getHours(),
        mm: date.getMinutes(),
        ss: date.getSeconds(),
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in nowDate) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? nowDate[k]
              : ("00" + nowDate[k]).substr(("" + nowDate[k]).length)
          );
        }
      }
      return fmt;
    },
  },
};
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
  padding: 10px;
}
</style>
